﻿<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>Crunchy Responsive Creative Template</title>
	<meta name="description" content="" />
	<meta name="author" content="" />
	<!--[if lt IE 9]>
		<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/skeleton.css" />
	<link rel="stylesheet" href="css/screen.css" />
    <link rel="stylesheet" href="css/mediaelementplayer.css" />
    <!--[if IE 7]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    
    <!-- Fonts
	================================================== -->
    <link href='http//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css' />
    
    <!-- Scripts
	================================================== -->
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
    <script src="js/ddsmoothmenu.js" type="text/javascript"></script>
    <script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
    <script src="js/jquery.fitvids.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/screen.js" type="text/javascript"></script>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>

	<!-- Site Backgrounds
	================================================== -->
	
    <!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
	<div class="poswrapheaderline wide"><div class="headerline full"></div></div>  
    <!-- Remove or uncomment depending on if you want a background image or tile -->
    <!--div class="tiledbackground"></div-->
    <img src="images/backgrounds/bg2.jpg" alt="" id="background" />
    <!-- Remove the bgoverlay div if you don't want the dark pattern overlay above the image -->
    <div class="bgoverlay"></div>
    <!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
    <div class="poswrapper"><div class="whitebackground"></div></div>

	<div class="container main portfolio4column">
    	
        <!-- Header | Logo, Menu
		================================================== -->
	
		<div class="sixteen columns header">
        
			<a href="index.html" class="logohover"><div class="logo"></div></a>
            <div class="mainmenu">
                <div id="mainmenu" class="ddsmoothmenu">
                    <ul>
                        <li><a href="#">Home</a>
                            <ul>  
                                <li><a href="index.html">Home Layout</a></li>
                                <li><a href="index_alternative.html">Portfolio Layout Example</a></li>
                                <li><a href="index_noslider.html">Video Layout</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Features</a>
                            <ul> 
                            	<li><a href="page_shortcodes.html">Shortcodes</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_full.html">Typography Full Page</a></li>
                                <li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
                                <li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
                                <li><a href="#">Another Menu Level</a>
                                    <ul>  
                                        <li><a href="#">Menu Entry One</a></li>
                                        <li><a href="#">Menu Entry Two</a></li>
                                        <li><a href="#">Menu Entry Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Portfolio</a>
                            <ul>  
                                <li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
                                <li><a href="portfolio_1column_full.html">Portfolio One Column</a></li>
                                <li><a href="portfolio_single.html">Project Detail Page</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Blog</a>
                            <ul>  
                                <li><a href="blog_overview.html">Blog Overview</a></li>
                                <li><a href="blog_single.html">Single Blog Post</a></li>
                                <li><a href="blog_overview_full.html">Blog Overview Full</a></li>
                                <li><a href="blog_single_full.html">Single Blog Post Full</a></li>
                            </ul>
                        </li>	
                        <li><a href="contact.html">Contact</a></li>	
                    </ul>
                    <br style="clear: left" />
                </div>
                
                <!-- Responsive Menu -->
                
				<form id="responsive-menu" action="#" method="post" />
                    <select>
                        <option value="" />Navigation
                    </select>
				</form>
				
            </div>
		</div>
    
        <!-- Page Title And Social
		================================================== -->
        
		<div class="pagetitle">
        	<div class="pagetitleholder"><h1>We are a simply awesome<br />design studio with <span style="color:#ffd200;">class</span>.</h1></div>
            <div class="socialholder">
            	<ul class="socialicons">
                	<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
                    <li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
                    <li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
                    <li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
                    <li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
                    <li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
                    <li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
                    <li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
                </ul>
			</div>
            <!--div class="headersearch">
                <form class="searchform" method="get" action="#">
                <input name="s" id="s" type="text" onFocus="if(this.value == 'Enter Search here...') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Enter Search here...'; }" value="Enter Search here..." />
                </form>
            </div-->
        </div>
        
         <!-- Line Divider
		================================================== -->
        
        <div class="sixteen columns linedivider" style="margin-top: 0;"></div>
        
        <!-- Portfolio Teasers
		================================================== -->
        
        <div class="sixteen columns row divide">
            <table><tr style="width:100%">
                <td style="white-space:nowrap;"><h3 class="titledivider">Latest Projects</h3></td>
                <td style="width:100%"><div class="dividerline"></div></td>
                <td style="white-space:nowrap;"><div class="rightlink"><a href="#" class="titlelink">See Whole Portfolio <span class="buttonarrow"></span></a></div></td>
            </tr></table>
        </div>
        
        <div class="sixteen columns row portfolio_filter">
        	<ul>
                <li><a class="portfolio_selector" data-group="all-group" href="#">All Projects</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="web-group" href="#">Web Design</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="photoshop-group" href="#">Photoshop</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="concepts-group" href="#">Concepts</a><span>|</span></li>
                <li><a class="portfolio_selector" data-group="print-group" href="#">Print Design</a></li>
            </ul>
        </div><div class="clear"></div>
        
		<div class="sixteen columns row teasers portfolio">
        
        	<div class="four columns teaser all-group web-group">
               <div class="folioinnershadow"></div>
               <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser1.jpg" alt="" class="scale-with-grid" /></a>
			   <div class="topline"><a href="#">Grunge Style</a></div>
			   <div class="subline"><a href="#">Web Design</a></div>
            </div>
			<div class="four columns teaser all-group photoshop-group">
            	<div class="folioinnershadow"></div>
                <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser2.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Fiery</a></div>
				<div class="subline"><a href="#">Photoshop</a></div>
            </div>
			<div class="four columns teaser all-group concepts-group">
            	<div class="folioinnershadow"></div>
                <a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser3.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Dynamic</a></div>
				<div class="subline"><a href="#">Conception</a></div>
            </div>
            <div class="four columns teaser all-group print-group">
            	<div class="folioinnershadow"></div>
            	<a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser4.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Sensual</a></div>
				<div class="subline"><a href="#">Print</a></div>
            </div>
            <div class="four columns teaser all-group print-group">
            	<div class="folioinnershadow"></div>
            	<a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser5.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Chillaxed</a></div>
				<div class="subline"><a href="#">Print</a></div>
            </div>
            <div class="four columns teaser all-group concepts-group">
            	<div class="folioinnershadow"></div>
            	<a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser6.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Wild</a></div>
				<div class="subline"><a href="#">Conception</a></div>
            </div>
            <div class="four columns teaser all-group photoshop-group">
            	<div class="folioinnershadow"></div>
            	<a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser7.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Magic</a></div>
				<div class="subline"><a href="#">Photoshop</a></div>
            </div>
            <div class="four columns teaser all-group web-group">
            	<div class="folioinnershadow"></div>
            	<a href="#" data-text="" class="hovering"><img src="images/thumbs/home_teaser8.jpg" alt="" class="scale-with-grid" /></a>
				<div class="topline"><a href="#">Tunes</a></div>
				<div class="subline"><a href="#">Web Design</a></div>
            </div>
            
			<div class="clear"></div>
		</div><div class="clear"></div>
        
        <div class="sixteen columns linedivider"></div>
        
        <!-- News
		================================================== -->
        
        <div class="eight columns row">
            <div class="eight columns divide alpha">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">The News</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                    <td style="white-space:nowrap;"><div class="rightlink"><a href="#" class="titlelink">Go To Blog <span class="buttonarrow"></span></a></div></td>
                </tr></table>
            </div>
            <div class="eight columns alpha">
            
                <div class="eight columns alpha newsteaser row"> 
                	<div class="newsinnershadow"></div>
                    <a href="#" data-text="" class="hovering"><img src="images/thumbs/from_blog1.jpg" alt="" /></a>
                    <div class="topline"><a href="#">New York City Lifestyle</a></div>
                    <div class="subline">9 Feb 2012 &nbsp; | &nbsp; in <a href="#">Company News</a>, <a href="#">Presentations</a></div>
                    <div class="newsmore"><a href="#" class="link">Read More <span class="buttonarrow"></span></a></div>
                </div>
                
                <div class="eight columns alpha newsteaser row">
               		<div class="newsinnershadow"></div>
                    <a href="#" data-text="" class="hovering"><img src="images/thumbs/from_blog2.jpg" alt="" /></a>
                    <div class="topline"><a href="#">Turntable Spinning</a></div>
                    <div class="subline">9 Feb 2012 &nbsp; | &nbsp; in <a href="#">Company News</a>, <a href="#">Presentations</a></div>
                    <div class="newsmore"><a href="#" class="link">Read More <span class="buttonarrow"></span></a></div>
                </div>
                
                <div class="eight columns alpha newsteaser row">
                	<div class="newsinnershadow"></div>
                    <a href="#" data-text="" class="hovering"><img src="images/thumbs/from_blog3.jpg" alt="" /></a>
                    <div class="topline"><a href="#">Fast Paced Action</a></div>
                    <div class="subline">9 Feb 2012 &nbsp; | &nbsp; in <a href="#">Company News</a>, <a href="#">Presentations</a></div>
                    <div class="newsmore"><a href="#" class="link">Read More <span class="buttonarrow"></span></a></div>
                </div>
                
            </div>
		</div>
        
        <!-- Clients
		================================================== -->
        
        <div class="eight columns row">
            <div class="eight columns divide alpha">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">Our Clients</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                    <td style="white-space:nowrap;"><div class="rightlink"><a href="#" class="titlelink">See All <span class="buttonarrow"></span></a></div></td>
                </tr></table>
            </div>
            <div class="eight columns alpha">
            
                <ul class="clients">
                    <li><a href="#"><img src="images/clients/client1.png" alt="" /></a></li>
                    <li><a href="#"><img src="images/clients/client2.png" alt="" /></a></li>
                    <li><a href="#"><img src="images/clients/client3.png" alt="" /></a></li>
                    <li><a href="#"><img src="images/clients/client4.png" alt="" /></a></li>
                    <li><a href="#"><img src="images/clients/client5.png" alt="" /></a></li>
                    <li><a href="#"><img src="images/clients/client6.png" alt="" /></a></li>
                </ul>
                
            </div>
		</div>
		
      <!-- Bottom Padding Adjust
       ================================================== --> 
       <div class="sixteen columns bottomadjust"></div>
            
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap full">
    
        <div class="footer">
        	<div class="sixteen columns">

				<div class="four columns widget alpha">
                    <div>
                        <img src="images/logo_bw.png" alt="" class="scale-with-grid" /><br />
Responsive Creative Template
<div class="threedot"></div>
<h3 style="margin-top: -7px;">Love our site?<br /><span class="themecolor">Spread the word!</span></h3>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fthemeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;send=false&amp;layout=button_count&amp;width=171&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=25" style="border:none; overflow:hidden; width:100%; height:25px;"></iframe>
<iframe src="http//platform.twitter.com/widgets/tweet_button.html?url=http//themeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;text=Crunchy%20Responsive%20Creative%20WordPress%20Theme&amp;lang=de&amp;count=horizontal&amp;via=damojo82&amp;related=envato" style="width:171px; height:20px;"></iframe>
                    </div>
                </div>
                
                
                
                <div class="four columns clearfix widget">
                   <h5>Twitter</h5>
                    <div class="widget_tweets">
                        <ul></ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                
                
                <div class="four columns widget">
                    <h5>Quick Contact</h5>
                    <div class="widget_quickcontact">
                        <form id="quickcontact" method="post" action="#" />
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onfocus="if(this.value == 'Name *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Name *'; }" value='Name *' />
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onfocus="if(this.value == 'Email *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Email *'; }" value='Email *' />
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onfocus="if(this.value == 'Message *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send <span class="buttonarrow"></span></button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div>
                

                          
                <div class="four columns widget omega">
                    <h5>Contact Info</h5>
                    <div class="widget_text">
                        <strong>Company Location</strong><br />
                        Crunchy Studios<br />
                        Mainstreet 123<br />
                        50600, Cologne, Germany<br /><br />
                        
                        <strong>How To Contact Us</strong><br />
                        Email: <a href="mailto:your@email.com">info@yourdomain.com</a><br />
                        Phone: 800.123.4567<br /><br />
                        
                        <strong>Office Hours</strong><br />
                        Mondays-Friday: 09:00 - 18:00<br />
                        Saturday: 10:00 - 15:00
                    </div>
                </div>
                
            </div>
        </div>
	</div><!-- container -->
    
    <!-- Sub-Footer
	================================================== -->
    
    <!-- Change to class="container subfooterwrap full" for a full-width subfooter -->
    <div class="container subfooterwrap full">
    
    	<div class="subfooter">
        	<div class="eight columns siteinfo">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http//shop109193845.taobao.com" title="即刻工作室">即刻工作室</a> Collect from <a href="http//shop109193845.taobao.com" title="即刻工作室" target="_blank">即刻工作室</a></div>
            <div class="eight columns sitenav">
                <a href="#">Home</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Features</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Portfolio</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Blog</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
    
    <div class="backtotop"><div class="btxt">Back to Top</div></div>

<!-- End Document
================================================== -->

</body>
</html>